// 创建一个类
class Show {
    constructor(id, teaName, teaType, teaImg, teaPrice, teaDescribe) {
        this.id = id;
        this.teaName = teaName;
        this.teaType = teaType;
        this.teaImg = teaImg;
        this.teaPrice = teaPrice;
        this.teaDescribe = teaDescribe;
    }
}

// 回显
window.onload = function() {
        // 发送ajax请求
        $.ajax({
            // 1.发送请求类型
            type: "post",
            // 2.接口路径
            url: "/js/firstPage",
            // 3.是否携带参数
            data: null,
            // 4.返回数据类型
            dataType: "json",
            // 5.回调函数 data表示后台接口返回的数据
            success: function(data) {
                //获取父元素标签对象
                let divobj = document.getElementById("newtea1");
                let s = "";
                // 判断本地存储是否为空
                if (data == "" || data == null || data == undefined || data == []) {
                    divobj.innerHTML = s;
                } else {
                    // 把获取的本地存储转换成json对象
                    let teaArr = JSON.parse(data);
                    console.log(teaArr);
                    // 遍历
                    for (let i = teaArr.length - 6; i < teaArr.length; i++) {
                        s += `<div class="art_img" id="newtea">`;
                        s += ` <div class="art_img_img"><img src="../img/${teaArr[i].teaImg}" alt=""  onclick='teaDescribe(\"${teaArr[i].teaName}\")'>
                    </div>`;
                        s += `<p class="art_img_teaname" onclick='teaDescribe(\"${teaArr[i].teaName}\")'>
                    ${teaArr[i].teaName}</p>`;
                        s += `<p>￥${teaArr[i].teaPrice}</p>`;
                        s += `</div>`;
                    }
                    divobj.innerHTML = s;
                }

            }
        })
        document.onscroll = function() {
            let top = parseInt(document.documentElement.scrollTop);
            console.log(top);
            let imglist = document.querySelectorAll(".art_img");
            if (top >= 400) {
                // document.getElementById("newtea1").style.animation = "scorll 1s linear forwards";
                console.log(imglist[0]);
                imglist[0].style.animation = "scorll 1s linear forwards .1s";
                imglist[1].style.animation = "scorll 1s linear forwards .2s";
                imglist[2].style.animation = "scorll 1s linear forwards .3s";
                imglist[3].style.animation = "scorll 1s linear forwards .4s";
                imglist[4].style.animation = "scorll 1s linear forwards .5s";
                imglist[5].style.animation = "scorll 1s linear forwards .6s";
            }
        }

    }
    // 
    // window.onload = function() {
    //         let divobj = document.getElementById("newtea");
    //         let imgobj = document.querySelectorAll(".newtea>div");
    //         console.log(imgobj);
    //         // 
    //         window.onscroll = function() {
    //             let top = document.documentElement.scrollTop;
    //             console.log(top);
    //             if (top > 340) {
    //                 divobj.style.animation = "centerkey 1s linear forwards"
    //             }
    //         }
    //     }

//鼠标滚动事件






// 进入茶叶描述
function teaDescribe(teaName) {
    console.log(teaName);
    // 获取本地存储 转为json对象
    let teaarr = JSON.parse(localStorage.Tea);
    let showteapage = [];
    for (let i = 0; i < teaarr.length; i++) {
        if (teaarr[i].teaName == teaName) {
            showteapage.push(teaarr[i]);
        }
    }
    // 创建新的本地存储
    localStorage.showTeaPage = JSON.stringify(showteapage);
    // 跳转到茶叶描述页面
    location.href = "09-茶叶描述.html";
}